<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.css" >
    <link rel="stylesheet" href="css/font-awesome.min.css" >
    <link rel="stylesheet" href="css/home.css" >

    <title>主页</title>
  </head>
  <body>
    <div id="app">

      <div class="nav" :style="{width:navWidth+'px'}"  >
        <div style="box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;"  >
          <img src="img/logo.png" style="height:50px;" />
        </div>
        <!-- 导航菜单 -->
        <div>
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link active" href="homecontent.html" target="iframe_a">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">图书借阅</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="lend.html" target="iframe_a">图书借出</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="books.html" target="iframe_a">申请借书</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="showborrowinfo.html" target="iframe_a">查看借阅信息</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="returnrequest.html" target="iframe_a">查看还书请求</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="borrowrequest.html" target="iframe_a">查看借阅请求</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">个人中心</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="userInfo.html" target="iframe_a">修改个人资料</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="message.html" target="iframe_a">消息</a>
            </li>
          </ul>
        </div>

      </div>
        <!--右边主体部分-->
        <div class="main" >
          <!-- 主界面上部 -->
            <div class="title">
              <i @click="switchNavWidth" class="fa fa-bars fa-2x" style="color:#CCCCCC;margin:12px 0px 0px 10px;cursor: pointer;"></i>
              <!--右侧的头像 -->
              <div class="curruser">
                <img v-if="currentUser.avatar" :src="'avatar?filename='+currentUser.avatar" style="width:40px;height:40px;border-radius:50%;margin-right: 20px" alt="img/default.jpg"/>
                <img v-if="!currentUser.avatar" src="img/default.jpg" style="width:40px;height:40px;border-radius:50%;margin-right: 20px" />
                {{currentUser.username}}用户，你好！
              </div>
            </div>

          <!--  主界面下部    -->
          <iframe src="homecontent.html" name="iframe_a" style="margin-left:2px;height: 100%;border:medium none;overflow: hidden"></iframe>

        </div>



    </div>

    
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>


       
        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {

                  navWidth:180,

                  currentUser:{},//当前用户信息
                  
                };
            },

            //定义方法
            methods:{
              //切换导航栏的宽度
              switchNavWidth(){
                this.navWidth = this.navWidth==180?0:180;
              },
            
              getCurrentUser(){
                myAxios.get('/current-user').then(res=>{
                  this.currentUser=res.data.data;
                  console.log("当前用户：",this.currentUser);
                });
              },
            },

            //定义回调方法：mounted 该方法在页面渲染完成立即执行
            mounted(){
                this.getCurrentUser();
            }
        };

        Vue.createApp(app).mount('#app')

    </script>
    

   
  </body>
</html>